<template>
  <el-container class="border w-75 mx-auto my-5 ">
    <el-header >
      <el-row>
         <el-card  class="my-2 w-100 text-end ">
      <el-button @click="this.$router.push('/collect')">我的收藏</el-button>
      <el-button @click="this.$router.push('/')">回到首页</el-button>
      </el-card>
      </el-row>
    </el-header>
    <el-main class="mx-auto w-100  ">
      <!--笔记标题-->
      
        <el-row>
        <span class="fs-1">{{ news.newsId  }}</span>
     
      
        <el-col>{{ news.newsTitle }}</el-col>
      
      <!--笔记内容-->
     
        <el-col>{{ news.publishTime }}</el-col>
      
        </el-row>
      
        <el-row>
          <el-col :span="2">
            <el-avatar shape="square" :size="100" :src="news.headUrl" />
          </el-col>
          <el-col :span="22" class="ps-3">{{ news.newsContent}}</el-col>
        </el-row>
      <el-row class="px-3 py-3">
        
       
          <el-col :span="10" >
            <el-button type="danger" plain>点赞</el-button>
            <el-button type="success" plain >收藏</el-button>
            <el-button type="primary" plain>分享到QQ</el-button>
            <el-button type="primary" plain>分享到微信</el-button>
          </el-col>
          <el-col :span="10" class="my-3 mx-3 text-end">
            点赞({{ news.likeNum }}) 
            阅读({{ news.viewNum }})
            评论({{ news.commentNum }})
          </el-col>
      
    
      </el-row>
      <!--评论区-->
      <div class="px-3 py-3">
        <NoteComment :noteInfoId="noteId" />
      </div>
    </el-main>
  </el-container>
</template>

<script>
import Editor from "@/editor/editor.js";
import NoteComment from "./NoteComment.vue";

export default {
  name: "NoteDetail",
  components: {
    NoteComment,
  },
  data() {
    return {
      editor: null,
      news: {
        newsId: null,
        newsTitle: null,
        publishTime: null,
        newsContent: null,
        commentNum: 0,
        likeNum: 0,
        viewNum: 0,
        headUrl: null,
      },
      newli:[],
    };
  },
  mounted() {
    this.getDetail();
    //this.initEditor();
  },
  methods: {
    getDetail() {
      this.$axios.get("/api/news/detail/list?newsId=2").then(
        (response) => {
          let data = response.data;
          if (data.code == 200) {
            this.news  = data.data;
          } else {
            alert(data.msg);
          }
        }
      );
    },
    initEditor() {
      this.editor = new Editor();
      this.editor.initContent(this.note.noteContent, true);
    },
    likeAction(newsId) {
      this.$axios.get("/api/home/comment?newsId=" + newsId).then((response) => {
        let data = response.data;
        alert(data.msg);
        if (data.code == 200) {
          this.news.likeNum += 1;
        }
      });
    },
  },
};
</script>


<style></style>
